<template>
  <f7-page class="qm-page">
    <f7-link back><f7-icon f7="chevron_left"></f7-icon></f7-link>
    <div class="qm-header">
      <h1>欢迎登录广州住建</h1>
      <div class="system">请选择您要进入的系统</div>
    </div>
    <!-- 内容一 -->
    <div v-for="(item, index) in list" :key="index">
      <f7-card class="qm-card" v-if="item.type === 'server'">
        <f7-list>
          <f7-list-item accordion-item :title="item.serverName">
            <f7-accordion-content>
              <f7-list>
                <div
                  @click="
                    items.owned === 0 ? ownedzero(items) : ownedone(items)
                  "
                  v-for="(items, index) in item.children"
                  :key="index"
                >
                  <div class="neirong" v-if="items.configurationType !== 0">
                    <div class="qm-icon">
                      <img :src="items.iconUrl" alt="" />
                    </div>
                    <span>{{ items.serverName }}</span>
                  </div>
                </div>
              </f7-list>
            </f7-accordion-content>
          </f7-list-item>
        </f7-list>
      </f7-card>
    </div>
    <!-- <div>{{query}}</div> -->
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      getUrl: "/api/app/mobileServer/getServerOptions",
      getownedd:"/api/app/mobileServer/bindWindows",
      appId: this.$f7.data.currentUser.userId,
      userCode: {
        userId: this.$f7.data.currentUser.userId,
        appCode: this.$f7.id || window.qmplus.runtime.appid,
      },
      list: [],
      tips1:vue.$f7.toast.create({
        icon: `<i class="f7-icons">rays</i>`,
        text: "加载中",
        cssClass:'qm-toast',
        position: "center",
        closeTimeout: 10000,
      }),
    };
  },
  methods: {
    // owned=1触发此事件
    ownedone(key) {
    this.$framework.account.changepanelinformation(key)
    if (key.serverUrl.indexOf("http") === -1) {
      this.$f7.views.current.router.navigate(key.serverUrl);
      } else {
      this.$framework.miniApp.open(key, null, "white");
     }
    },
    // owned=0触发此事件
    ownedzero(key) {
      // w.show(); // 显示窗口
      // 显示顶部文案
      if (key.configurationType === 1) {
        this.$f7.dialog.confirm(key.alertMessage);
        return;
      } else if (key.configurationType === 2) {
        // 可以根据提示连接进行跳转
        this.$f7.dialog.confirm(key.alertMessage, function () {
          this.$framework.miniApp.open(key.applicationUrl, null, "white");
        });
        return;
      } else {
        // 直接跳转页面
        let parameter = {
          windowsId:key.serverId
        }
        this.$f7.request.post(this.getownedd, parameter, (r) => {
          r = JSON.parse(r);
          if (r && r.success) {
            console.log('添加系统成功');
            this.$framework.account.getuserServers()
          } else {
            this.$f7.dialog.confirm(r.message);
          }
        });
        this.$framework.account.changepanelinformation(key)
        if (key.serverUrl.indexOf("http") === -1) {
          this.$f7.views.current.router.navigate(key.serverUrl);
        } else {
          this.$framework.miniApp.open(key, null, "white");
        }
      }
      // this.$framework.miniApp.open('baidu', null, "white");
    },
  },
  created() {
      this.tips1.open()
    this.$f7.request.post(this.getUrl, this.userCode, (r) => {
      r = JSON.parse(r);
      if (r && r.success) {
        this.tips1.close()
        this.list = r.data;
      } else {
        this.tips1.close()
        this.$f7.dialog.confirm("无法获取数据，请重新登录后重新尝试");
      }
    });
  },
  destroyed(){
    this.tips1.close()
  }
};
</script>

<style lang="less" scoped>
.qm-page {
  padding: 0px 10px;
  background-color: #f8fafb;
  .qm-header {
    margin-left: 20px;
    margin-bottom: 50px;
    .system {
      color: #98a4bb;
    }
  }
  .qm-card {
    .neirong {
      display: flex;
      align-items: center;
      width: 90%;
      height: 78px;
      border: 1px solid #ccd3de;
      border-radius: 7px;
      margin: 5px 18px 13px;
      span {
        color: #92a2bb;
        margin-right: 10px;
      }
      .qm-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #f3f7ff;
        margin: 0px 30px;
        text-align: center;
        img {
          width: 40px;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
